<?php
/**
 * The Template for displaying category posts.
 *
 * @file      category.php
 * @author    Chinh Tran.
 * @link 	  http://phunuchungminh.com
 */
 
?>
<?php get_header();  ?>
<?php  $cat_ID = get_query_var('cat'); ?>
<style>
    .navigation .menu-list li.current-menu-item, .navigation .menu-list li.current-post-ancestor, .current-menu-parent{
      background: #dd6081;
      padding: 11px 20px 8px 15px !important;
    }
    
    .main-menu-fixed .menu-list li.current-menu-item, .main-menu-fixed .menu-list li.current-post-ancestor, .current-menu-parent{
        background: #E7D3D8 !important;
    }
</style>

<div class="content">
		<div class="wrapper">
			<div class="container">
				<div class="left-block full-width-md full-width-sm full-width-xs">
					<div class="block-row">
						
						<div class="block-1-2">
							<div class="block-1-2-left star-feature-bg full-width-xs">
                                <?php $i = 0; $postID_exclude = array();  
                                    $args = array(
                                        'cat'                 =>$cat_ID,
                                    	'posts_per_page'      => 3,
                                        );
                                    $the_query = new WP_Query($args);
                                    // The Loop
                                    if ( $the_query->have_posts() ) {
                                    	
                                    	while ( $the_query->have_posts() ) {
                                    		$the_query->the_post();
                                            array_push($postID_exclude,get_the_ID());
                                            if($i <= 0){
                                            ?>
                                            <div class="feature-news">
            									<a href="<?php esc_url(the_permalink())?>" style="background:url(<?php echo get_bg_image(get_the_ID());?>) no-repeat; background-size: cover;" ><img src="<?php echo get_bg_image(get_the_ID());?>" alt="<?php the_title() ?>"/></a>
            									<a href="<?php esc_url(the_permalink())?>" style="display: inline;"><h2> <?php the_title() ?> </h2></a>
            									<p> <?php echo substr(get_the_excerpt(), 0,150); ?>..</p>
            								</div>
                                            
                                            <?php } else{?>
                                            <div class="news-item"> 
            									<a href="<?php esc_url(the_permalink())?>"> <?php the_title() ?></a>
            								</div>
 						         <?php } $i++; }} wp_reset_postdata(); ?>
                            
							</div>
							<div class="block-1-2-right full-width-xs">
								<ul class="items-list full-width-xs">
                                    <?php $args = array(
                                            'cat'                 =>$cat_ID,
                                    	    'posts_per_page'      => 6,
                                            'post__not_in'        =>$postID_exclude,
                                          );
                                            $the_query = new WP_Query($args);
                                            // The Loop
                                            if ( $the_query->have_posts() ) {
                                            	
                                            	while ( $the_query->have_posts() ) {
                                            		$the_query->the_post();
                                                    array_push($postID_exclude,get_the_ID());
                                                    ?>
                                                    <li>
                										<div class="news-item"> 
                											<a href="<?php esc_url(the_permalink())?>" style="background:url(<?php echo get_bg_image(get_the_ID());?>) no-repeat; background-size: cover;" class="img"><img src="<?php echo get_bg_image(get_the_ID());?>" alt=" <?php the_title() ?>"/></a>
                											<a href="<?php esc_url(the_permalink())?>"> <?php the_title() ?> </a>
                                                            <span class="time hidden-lg hidden-md visible-sm visible-xs"> <?php echo get_the_date('H:s | d/m/Y'); ?></span>
                										</div>
                									</li>
 						             <?php  }} wp_reset_postdata(); ?>
                                    
								</ul>
								
							</div>
						</div>
					</div><!--End block-row-->
				</div><!--End left-block-->
				<div class="right-block hidden-md hidden-sm hidden-xs">
					<div class="banner banner-300x250">
						<a href="#"> <img src="<?php echo get_template_directory_uri() ?>/images/banner_300x250.png" alt="logo"/></a>
					</div>
					<div class="trend-tag">
						<div class="trend-head">
							<h2> XU HƯỚNG ĐỌC TIN</h2>
						</div>
						<div class="clear"> </div>
						<div class="trend-content fslider carousel" id="slider">
							<ul class="slides">
                                <?php $tags = trend_tags(); ?>
                                <?php foreach($tags as $tag){?>
                                    <li style="background: <?php echo get_random_color(); ?>; margin-right: 5px !important;"> <a href="<?php echo get_tag_link($tag->term_id); ?> "> <?php echo $tag->name; ?> </a> </li>
                                <?php }?>
									
							</ul>
						</div>
					</div><!--End trend tag-->
				</div><!--End banner-block-->
			</div><!--End container-->
		</div><!--End feature-wrap-->
		<div class="clear"> </div>
		<div class="wrapper">
			<div class="container hidden-md hidden-sm hidden-xs">
				<div class="mostview-block cate">
					<div class="cate-bg"></div>
					<ul class="mostview-news-list slides">
                        <?php  $args = array(
                                    'cat'                 =>$cat_ID,
                                	'posts_per_page'      => 12,
                                    'meta_key'            => 'post_views_count',
                                    'orderby'             =>  'meta_value_num',
                                    'order'               => 'DESC', 
                                    );
                                $the_query = new WP_Query($args);
                                // The Loop
                                if ( $the_query->have_posts() ) {
                                	
                                	while ( $the_query->have_posts() ) {
                                		$the_query->the_post();
                                        ?>
                                        <li>
                							<div class="news-item"> 
                								<a href="<?php esc_url(the_permalink())?>" style="background:url(<?php echo get_bg_image(get_the_ID());?>) no-repeat; background-size: cover;" class="img"><img src="<?php echo get_bg_image(get_the_ID());?>" alt="<?php the_title() ?> "/></a>
                								<a href="<?php esc_url(the_permalink())?>"> <?php the_title() ?> </a>
                							</div>
                						</li>
                                        
	                       <?php }} wp_reset_postdata(); ?>
                    
					</ul>
				</div><!--End mostview-block-->
				<div class="clear"> </div>
				<div class="banner-bottom-block hidden-md hidden-sm hidden-xs">
					<div class="banner banner-728x90">
						<a href="#"> <img src="<?php echo get_template_directory_uri() ?>/images/banner_728x90.png" id="mouse-banner" alt="banner_728x90"/></a>
					</div>
					<div class="banner banner-300x250">
						<a href="#"> <img src="<?php echo get_template_directory_uri() ?>/images/banner_300x250.png" class="hide-banner" alt="logo"/></a>
					</div>
				</div>
			</div><!--End container-->
		</div><!--End wrapper-->
		<div class="clear"> </div>
		<div class="wrapper">
			<div class="container">
				
				<ul class="large-items-list full-width-md full-width-sm hidden-xs">
                    <?php $args = array(
                              'cat'                 =>$cat_ID,
               	              'posts_per_page'      => 6,
                              'post__not_in'        =>$postID_exclude,
                          );
                          $the_query = new WP_Query($args);
                          // The Loop
                          if ( $the_query->have_posts() ) {
                              while ( $the_query->have_posts() ) {
                                    $the_query->the_post();
                                    array_push($postID_exclude,get_the_ID());
                               ?>
                               <li>
            						<div class="news-item" style="position: absolute;"> 
            							<a href="<?php esc_url(the_permalink())?>" style="background:url(<?php echo get_bg_image(get_the_ID());?>) no-repeat; background-size: cover;" class="img"><img src="<?php echo get_bg_image(get_the_ID());?>" alt="<?php the_title() ?>"/></a>
            							<a href="<?php esc_url(the_permalink())?>"> <?php the_title() ?> </a>
            							<span class="time hidden-md hidden-sm hidden-xs"> <?php echo get_the_date( 'H:i | d/m/Y', get_the_ID() ); ?></span>
            						</div>
            					</li>
                               
 					<?php  }} wp_reset_postdata(); ?>
                
				</ul>
			
			</div>
		</div>
		<div class="clear"> </div>
		<div class="wrapper">
			<div class="container">
				<div class="left-block cate-left-block full-width-sm full-width-xs">
					   <div class="cate-right-bar hidden-lg hidden-md visible-sm visible-xs">	<h1> TIN MỚI NHẤT</h1></div>
                        <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; 
                            $args = array(
                                  'cat'                 =>$cat_ID,
                   	              'posts_per_page'      => 16,
                                  'post__not_in'        =>$postID_exclude,
                                  'paged' => $paged
                              );
                              $the_query = new WP_Query($args);
                              // The Loop
                              if ( $the_query->have_posts() ) {?>
                                <ul class="portrait-items-list">
                              
                                  <?php  while ( $the_query->have_posts() ) {
                                            $the_query->the_post();
                                            array_push($postID_exclude,get_the_ID());?>
                                           <li>
                        						<div class="news-item" > 
                        							<a href="<?php esc_url(the_permalink())?>" style="background:url(<?php echo get_bg_image(get_the_ID());?>) no-repeat; background-size: cover;" class="img"><img src="<?php echo get_bg_image(get_the_ID());?>" alt="feature"/></a>
                        							<div class="right-info">
                        								<a href="<?php esc_url(the_permalink())?>"> <?php the_title() ?> </a>
                        								<span class="time hidden-lg hidden-md visible-sm visible-xs"> <?php echo get_the_date('H:s | d/m/Y'); ?></span>
                        								<p class="summary hidden-sm hidden-xs"> <?php echo substr(get_the_excerpt(), 0,158); ?>..</p>
                        							</div>
                        							
                        						</div>
                        					</li>
                        					<div class="clear"> </div>
         					      <?php  }?>
                                </ul>
                                
                           <div class="block-row">
                                <?php if($paged <= $the_query->max_num_pages-1) {?>
            					   <a href="<?php echo esc_url(get_category_link($cat_ID)).'?paged=' . ($paged+1); ?>" class="view_more_listnews hidden-md hidden-sm visible-xs">Xem thêm</a>
            					<?php } else{?>
                                    <a  class="view_more_listnews hidden-md hidden-sm visible-xs">Không còn tin để hiển thị</a>
                                <?php }?>
                                <div class="paginator visible-md visible-sm hidden-xs">
                                    <?php if($the_query->max_num_pages > 1){ 
                                        if( $the_query->max_num_pages > 5 ){
                                            
                                            $limit = $paged + 5;
                                            if( $limit > $the_query->max_num_pages)
                                            {
                                                $limit = $the_query->max_num_pages;
                                            }
                                            
                                            if( $paged >= 3)
                                            {
                                                $start = $paged - 2;
                                            }
                                            else 
                                            { 
                                                $start = $paged;
                                            
                                            }
                                        }
                                        else{
                                            $start = $paged;
                                            $start = 0;
                                        }
                                        ?>
                						<ol>
                                            <?php
                                              if ($paged > 1) { ?>
                                              <li><a href="<?php echo esc_url(get_category_link($cat_ID)).'?paged=' . ($paged -1);?>" class="prev"><img src="<?php echo get_template_directory_uri() ?>/images/arrow-left.png"></a></li>
                                               
                                              <?php }
                                              for( $i= $start; $i <= $limit; $i++){?>
                                                <li><a href="<?php echo esc_url(get_category_link($cat_ID)).'?paged=' . $i; ?>" <?php echo ($paged==$i)? 'class="current page"':'class="page"';?> ><?php echo $i;?></a></li>
                                                
                        						 <?php
                                              }
                                              if($paged < $the_query->max_num_pages){?>
                                                   <li> <a href="<?php echo esc_url(get_category_link($cat_ID)).'?paged=' . ($paged + 1);?>" class="next"><img src="<?php echo get_template_directory_uri() ?>/images/arrow-right.png"></a></li>
                                              <?php } ?>
                							
                						</ol>
                                    <?php } ?>
            					</div>
            				</div>
                          <?php } wp_reset_postdata(); ?>
                    
				        
				<!--div class="block-row">
					<a href="#" class="view_more_listnews">Xem thêm</a>
					<div class="paginator">
						<ol class="wp-paginate">
							<li><a href="#" class="next"><img src="images/arrow-left.png"></a></li>
							<li><span class="page current">1</span></li>
							<li><a href="#" title="2" class="page">2</a></li>
							<li><a href="#" title="3" class="page">3</a></li>
							<li><a href="#" title="4" class="page">4</a></li>
							<li><a href="#" title="5" class="page">5</a></li>
							<li><a href="#" class="next"><img src="images/arrow-right.png"></a></li>
						</ol>
                        
					</div>
				</div-->
					
				</div><!--End left-block-->
				<div class="right-block hidden-xs hidden-sm">
					<div class="block-row cate-right-bar">
						<h1> <span>TOP</span> ẨM THỰC</h1>
						<ul class="items-list">
                            <?php $args = array(
                                        'category_name'      => 'am-thuc',
                                        'posts_per_page'    => 6,
                                        'orderby'           => 'meta_value_num',
                                        'orderby'           => 'date', 
                                        'order'             => 'DESC'
                                   );
                                   $the_query = new WP_Query($args);
                                   // The Loop
                                   if ( $the_query->have_posts() ) {
                                        while ( $the_query->have_posts() ) {
                                            $the_query->the_post();?>
                                            <li>
                								<div class="news-item" > 
                									<a href="<?php esc_url(the_permalink())?>" style="background:url(<?php echo get_bg_image(get_the_ID());?>) no-repeat; background-size: cover;" class="img_rblock">
                										<img src="<?php echo get_bg_image(get_the_ID());?>" alt="<?php the_title() ?>"/>
                									</a>
                									<a href="<?php esc_url(the_permalink())?>"> <?php the_title() ?> </a>
                								</div>
                							</li>
                							<div class="clear"> </div>
                                            
                                                    
                            <?php  }} wp_reset_postdata(); ?>
                        
									
						</ul>
						<a href="<?php echo esc_url( home_url( '/' ) ); ?>chuyen-muc/am-thuc" class="crb-view-more">Xem thêm <span> Ẩm Thực</span></a>
					</div><!--End block-row-->
					<div class="clear"> </div>
					<div class="block-row">
						<div class="items-list">
							<a href="#"><img src="<?php echo get_template_directory_uri() ?>/images/banner_300x250.png" alt="fadf"/></a>
						</div>
					</div><!--End block-row-->
					<div class="clear"> </div>
					<div class="block-row cate-right-bar">
						<h1> <span>TOP</span> GIA ĐÌNH</h1>
						<ul class="items-list">
                            <?php $args = array(
                                        'category_name'      => 'gia-dinh',
                                        'posts_per_page'    => 6,
                                        'orderby'           => 'meta_value_num',
                                        'orderby'           => 'date', 
                                        'order'             => 'DESC'
                                   );
                                   $the_query = new WP_Query($args);
                                   // The Loop
                                   if ( $the_query->have_posts() ) {
                                        while ( $the_query->have_posts() ) {
                                            $the_query->the_post();?>
                                            <li>
                								<div class="news-item" > 
                									<a href="<?php esc_url(the_permalink())?>" style="background:url(<?php echo get_bg_image(get_the_ID());?>) no-repeat; background-size: cover;" class="img_rblock">
                										<img src="<?php echo get_bg_image(get_the_ID());?>" alt="<?php the_title() ?>"/>
                									</a>
                									<a href="<?php esc_url(the_permalink())?>"> <?php the_title() ?> </a>
                								</div>
                							</li>
                							<div class="clear"> </div>
                                            
                                                    
                            <?php  }} wp_reset_postdata(); ?>
                        		
						</ul>
						<a href="<?php echo esc_url( home_url( '/' ) ); ?>chuyen-muc/gia-dinh" class="crb-view-more">Xem thêm <span> Gia đình</span></a>
					</div><!--End block-row-->
					<div class="clear"> </div>
					<div class="block-row">
						<div class="items-list">
							<a href="#"><img src="<?php echo get_template_directory_uri() ?>/images/banner_300x250.png" alt="fadf"/></a>
						</div>
					</div><!--End block-row-->
					<div class="clear"> </div>
					
				</div><!--End right-block-->	
			</div><!--End container-->
		</div><!--End wrapper-->
</div><!--End content-->
<?php get_footer(); ?>